<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
    .v-link-active {
      color: red;
    }
    .active {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="app">
    <a v-link="{path: '/home', activeClass: 'active'}">Home</a>
    <a v-link="{path: '/about'}">About</a>
    <router-view></router-view>
    <div>
      <p>当前路径: {{$route.path}}</p>
      <p>当前参数: {{$route.params | json}}</p>
      <p>路由名称: {{$route.name}}</p>
      <p>路由查询参数: {{$route.query | json}}</p>
      <p>路由匹配项: {{$route.matched | json}}</p>
    </div>
  </div>
  <template id="newsDetail">
    <div>
      New Detail - {{$route.params.id}}
    </div>
  </template>
  <template id="home">
    <div>
      <h1>Home</h1>
      <p>{{msg}}</p>
    </div>
    <div>
      <ul class="nav nav-tabs">
        <li><a v-link="{ name: 'news'}">News</a></li>
        <li><a v-link="{ path: '/home/message'}">Messages</a></li>
      </ul>
      <router-view></router-view>
    </div>
  </template>
  <template id="news">
    <div>
      <ul>
        <li><a v-link="{ name: 'detail', params: {id: '01'} }">News 01</a></li>
        <li><a v-link="{ path: '/home/news/detail/02'}">News 02</a></li>
        <li><a v-link="{ path: '/home/news/detail/03'}">News 03</a></li>
      </ul>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </template>
  <template id="message">
    <ul>
      <li>Message 01</li>
      <li>Message 02</li>
      <li>Message 03</li>
    </ul>
  </template>
  <script src="js/vue.js" charset="utf-8"></script>
  <script src="js/vue-router.min.js" charset="utf-8"></script>
  <script type="text/javascript">

    var Home = Vue.extend({
      template: '#home',
      data: function () {
        return {
          msg: 'Hello, vue router!'
        }
      }
    })

    var News = Vue.extend({
      template: '#news'
    })

    var Message = Vue.extend({
      template: '#message'
    })

    var About = Vue.extend({
      template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
    })

    var NewsDetail = Vue.extend({
      template: '#newsDetail'
    })

    var router = new VueRouter();
    router.map({
      '/home': {
        component: Home,
        subRoutes: {
          '/news': {
            name: 'news', //具名路径
            component: News,
            subRoutes: {
              'detail/:id': {
                name: 'detail',
                component: NewsDetail
              }
            }
          },
          '/message': {
            component: Message
          }
        }
      },
      '/about': {
        component: About
      }
    })

    var App = Vue.extend({});
    router.start(App, '#app');
  </script>
  <script type="text/javascript">
  {
    "0": {
    "handler": {
      "subRoutes": {
        "/news": {
          "name": "news",
          "subRoutes": {
            "detail/:id": {
              "name": "detail",
              "path": "detail/:id",
              "fullPath": "/home/newsdetail/:id"
            }
          },
          "path": "/news",
          "fullPath": "/home/news"
        },
        "/message": { "path": "/message", "fullPath": "/home/message" }
      },
       "path": "/home",
       "fullPath": "/home"
     },
    "params": {},
    "isDynamic": false
   },
  "queryParams": {},
  "length": 1
 }
  </script>
</body>
</html>
